<template>
	<view class="issue">
		<!-- 自定义导航栏 -->
		<simple-nav :title='navtitle'></simple-nav>
		<view class="main">
			<!-- 描述 -->
			<view class="issue-title">
				<view class="dot">●</view>
				<view>选择要发布的信息类型</view>
			</view>
			<!-- 图标 -->
			<view class="issue-icon">
				<view class="icon-item" v-for="(item,index) in iconList" :key='index' @click="goIssue(item.type)">
					<image :src="item.src" mode=""></image>
					<view class="">{{item.title}}</view>
				</view>
			</view>
			<!-- 免责声明 -->
			<view class="issue-state">
				<view class="issue-title" style="border-bottom: 1px solid #F5F5F5;">
					<view class="dot">●</view>
					<view>免责声明</view>
				</view>
				<view class="state-desc">
					1、“布市场”内各类信息，由商家提供和负责，内容的准
					确性、真实性以及合法性等由商家负责，本平台不承担责
					任。<br>
					2、“布市场”只提供发布、查看信息的需求，通过布市场
					的一切交易是用户自行自愿交易，对交易风险由双方自行负
					责，“布市场”不承担任何保证责任。<br>
					3、“布市场”部分资料来源于网络，如侵犯了您的权益，
					请联系我们，我们会在24小时内处理。<br>
					4、“布市场”认为，所有用户在进入本小程序及各个页面
					已经了解并同意本条款。
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import simpleNav from '@/components/custom-simple-nav/custom-simple-nav.vue'
	export default {
		data() {
			return {
				navtitle: '信息发布',
				iconList: [{
						'src': '/static/tabbar/images/a2.png',
						'title': '求购',
						'type': 2
					},
					{
						'src': '/static/tabbar/images/a1.png',
						'title': '供应',
						'type': 1
					},
					{
						'src': '/static/tabbar/images/a3.png',
						'title': '染整加工',
						'type': 3
					},
					{
						'src': '/static/tabbar/images/a4.png',
						'title': '成品色坯',
						'type': 4
					},
					{
						'src': '/static/tabbar/images/a5.png',
						'title': '机械',
						'type': 5
					},
				],
			}
		},
		components: {
			simpleNav
		},
		methods: {
			goIssue(class_id) {
				let url = '';
				switch (class_id) {
					case 1:
						url = '/pages/issue/gy-issue/gy-issue?class_id=' + class_id;
						break;
					case 2:
						url = '/pages/issue/qg-issue/qg-issue?class_id=' + class_id;
						break;
					case 3:
						url = '/pages/issue/rz-issue/rz-issue?class_id=' + class_id;
						break;
					case 4:
						url = '/pages/issue/sp-issue/sp-issue?class_id=' + class_id;
						break;
					case 5:
						url = '/pages/issue/jx-issue/jx-issue?class_id=' + class_id;
						break;
					case 6:
						url = '/pages/issue/pj-issue/pj-issue?class_id=' + class_id;
						break;
				}

				if (url) {
					uni.navigateTo({
						url
					})
				}
			}
		}
	}
</script>

<style>
	.main {
		color: #828282;
		font-size: 32upx;
	}

	.issue-title {
		height: 80upx;
		line-height: 80upx;
		padding: 10upx;
		display: flex;
		font-size: 32upx;

	}

	.issue-title .dot {
		margin: 0 20upx;
		color: #F27B20;
		font-size: 50upx;
	}

	.issue-icon {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		color: #959595;
		font-size: 30upx;
		border-top: 0.5upx solid #eee;
	}

	.issue-icon .icon-item {
		display: flex;
		width: 32.8%;
		height: 200upx;
		border-right: 1upx solid #EEE;
		border-bottom: 1upx solid #EEE;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		padding: 40upx 0;
	}
	.issue-icon .icon-item:nth-child(3n){
		border-right: 0;
	}

	.icon-item image {
		width: 60upx;
		height: 60upx;
		margin-bottom: 20upx;
	}

	.issue-state {
		border-top: 20upx solid #F5F5F5;
	}

	.state-desc {
		text-align: justify;
		line-height: 54upx;
		font-size: 28upx;
		padding: 40upx;
	}
</style>
